<template>
  <div class="customer-detail-box">
    <el-card class="box-card" style="margin-bottom:10px">
      <div slot="header" class="clearfix">
        <span>线索信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">线索ID：{{ form.id }}</el-col>
        <el-col :span="8">客户姓名：{{ form.name }}</el-col>
        <el-col :span="8">客户性别：{{sexFormat(form.sex)}}</el-col>
      </el-row>
        <el-row :gutter="20">
        <el-col :span="8">客户年龄：{{ form.age }}</el-col>
        <el-col :span="8">客户微信：{{ form.weixin }}</el-col>
        <el-col :span="8">客户QQ：{{form.qq}}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">手机号：{{form.phone}}</el-col>
        <el-col :span="8">创建时间：{{ form.createTime }}</el-col>
        <el-col :span="8">线索分配：{{ form.createBy }}</el-col>
      </el-row>
      <el-row :gutter="20"> 
        <el-col :span="8">线索归属：{{ form.ownerName }}</el-col>
        <el-col :span="8">归属时间：{{ form.ownerTime }}</el-col>
        <el-col :span="8">渠道来源：{{channelOptionsFormat(form.channel)}}</el-col> 
      </el-row>
      <el-row :gutter="20">
        <el-col>活动信息：{{ form.activityInfo }}</el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>跟进记录</span>
      </div>
      <el-table :data="pageData.data" style="width: 100%" border>
        <el-table-column prop="level" label="意向等级">
          <template slot-scope="scope">
            {{levelFormat(scope.row.level)}}
          </template>
        </el-table-column>
        <el-table-column prop="subject" label="意向学科">
          <template slot-scope="scope">
            {{subjectFormat(scope.row.subject)}}
          </template>
        </el-table-column>
        <el-table-column prop="record" label="跟进记录"></el-table-column>
        <el-table-column prop="createBy" label="跟进人"></el-table-column>
        <el-table-column prop="createTime" label="跟进时间"></el-table-column>
        <el-table-column prop="nextTime" label="下次跟进时间"></el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.totalCount">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //查询的数据模型
      searchForm: {
        //过滤条件
        clueId: null,
        //分页条件
        pageNo: 1,
        pageSize: 5,
      },
      // 详情数据
      form: {},
      // 性能字典
      sexOptions: [],
      // 意向等级字典
      levelOptions: [],
      // 意向学科字典
      subjectOptions: [],
      //渠道来源
      channelOptions: [],
      //伪线索
      falseReasonOptions: [],
      //跟进记录
      pageData: {
        data: [], // 分页数据
        pageNo: 1, // 当前页
        pageSize: 5, // 一页的大小
        totalCount: 0, // 总数据量
        totalPageCount: 0, // 总页数
      },
    }
  },
  created () {
    this.searchForm.clueId = this.$route.query.id
    //查询页面所需的数据字典
    this.getDicList()
    //查询线索信息
    this.getInfo()
    //查询跟进记录
    this.getRecordList()
  },
  methods: {
    //查询线索详情
    getInfo () {
      this.$axios.get("/api/tb/clue/view/"+this.searchForm.clueId)
        .then((res) => {
          if (res.data.code == 200) {
            this.form = res.data.data
          } else {
            this.$message.error(res.data.msg);
          }
        })
    },
    //查询线索跟进记录
    getRecordList () {
      this.$axios.get("/api/tb/clueRecord/list", {params:this.searchForm})
        .then((res) => {
          if (res.data.code == 200) {
            this.pageData.pageNo = res.data.data.current;
            this.pageData.pageSize = res.data.data.size;
            this.pageData.totalCount = res.data.data.total;
            this.pageData.totalPageCount = res.data.data.pages;
            this.pageData.data = res.data.data.records;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变每页显示的条数
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getRecordList();
    },
    //改变当前的页码数
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.getRecordList();
    },
    // 回显数据字典
    selectDictLabel(datas, value) {
      var actions = [];
      Object.keys(datas).some((key) => {
        if (datas[key].dictValue == ('' + value)) {
          actions.push(datas[key].dictLabel);
          return true;
        }
      })
      return actions.join('');
    },
    // 性能字典翻译
    sexFormat (val) {
      return this.selectDictLabel(this.sexOptions, val)
    },
    // 意向等级字典翻译
    levelFormat (val) {
      return this.selectDictLabel(this.levelOptions, val)
    },
    // 意向学科字典翻译
    subjectFormat (val) {
      return this.selectDictLabel(this.subjectOptions, val)
    },
    // 渠道来源字典翻译
    channelOptionsFormat (val) {
      return this.selectDictLabel(this.channelOptions, val)
    },
    // 伪线索字典翻译
    reasonsOptionsFormat (val) {
      return this.selectDictLabel(this.falseReasonOptions, val)
    },
    //查询数据字典
    getDicList () {
      this.$axios.get("/api/sys/dictData/optionselect/sys_user_sex")
        .then((res) => {
          if (res.data.code == 200) {
            this.sexOptions = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
      this.$axios.get("/api/sys/dictData/optionselect/clues_level")
        .then((res) => {
          if (res.data.code == 200) {
            this.levelOptions = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
      this.$axios.get("/api/sys/dictData/optionselect/course_subject")
        .then((res) => {
          if (res.data.code == 200) {
            this.subjectOptions = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
      this.$axios.get("/api/sys/dictData/optionselect/clues_item")
        .then((res) => {
          if (res.data.code == 200) {
            this.channelOptions = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
      this.$axios.get("/api/sys/dictData/optionselect/reasons_for_reporting")
        .then((res) => {
          if (res.data.code == 200) {
            this.falseReasonOptions = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
    },
  }
}
</script>
<style scoped>
   .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
